<template>
    <div class="change-date">
        <span
            v-show="showDateRangePicker"
            @click="setDateRangePicker"
        >
            <el-date-picker
                v-model="dateRangeVal"
                ref="dateRangePickerRef"
                type="daterange"
                popper-class="date-range-picker-popover"
                @change="changeDateRange"
                @blur="blurDateRangePicker"
            />
        </span>
        <span
            v-show="showYearPicker"
            @click="setYearPicker"
        >
            <el-date-picker
                v-model="yearVal"
                ref="yearPickerRef"
                type="year"
                popper-class="year-picker-popover"
                @change="changeYear"
                @blur="blurYearPicker"
            />
        </span>
        <span
            v-show="showMonthPicker"
            @click="setMonthPicker"
        >
            <el-date-picker
                v-model="monthVal"
                ref="monthPickerRef"
                type="month"
                popper-class="month-picker-popover"
                @change="changeMonth"
                @blur="blurMonthPicker"
            />
        </span>
        <!-- 左侧选项区 -->
        <div v-if="visiable" class="side-bar" :style="{ 'left': posiLeft, 'top': posiTop }" @click="stopBubble" @mouseenter="mouseenterSidebar" @mouseleave="mouseleaveSidebar">
            <div :class="showYearPicker ? 'side-bar-item-active' : 'side-bar-item'" @click="chooseYear">
                <span>按年</span>
            </div>
            <div :class="showMonthPicker ? 'side-bar-item-active' : 'side-bar-item'" @click="chooseMonth">
                <span>按月</span>
            </div>
            <div :class="showDateRangePicker ? 'side-bar-item-active' : 'side-bar-item'" @click="chooseDateRange">
                <span>按月日期范围</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'changeDate',
    props: {},
    data() {
        return {
            dateRangeVal: '',
            yearVal: '',
            monthVal: '',
            visiable: false,
            posiLeft: null,
            posiTop: null,
            showDateRangePicker: true,
            showYearPicker: false,
            showMonthPicker: false,
            inSidebar: false
        }
    },
    methods: {
        // 选择年
        chooseYear() {
            this.showDateRangePicker = false;
            this.showMonthPicker = false;
            this.showYearPicker = true;
            this.visiable = true;
            this.$nextTick(() => {
                this.$refs.yearPickerRef.showPicker();
            });
        },
        // 选择月
        chooseMonth() {
            this.showDateRangePicker = false;
            this.showMonthPicker = true;
            this.showYearPicker = false;
            this.visiable = true;
            this.$nextTick(() => {
                this.$refs.monthPickerRef.showPicker();
            });
        },
        // 选择日期范围
        chooseDateRange() {
            this.showDateRangePicker = true;
            this.showMonthPicker = false;
            this.showYearPicker = false;
            this.visiable = true;
            this.$nextTick(() => {
                this.$refs.dateRangePickerRef.showPicker();
            });
        },
        setDateRangePicker() {
            this.posiTop = `${this.$refs.dateRangePickerRef.picker.$el.offsetTop}px`;
            this.posiLeft = `${this.$refs.dateRangePickerRef.picker.$el.offsetLeft - 150}px`
            this.visiable = true;
        },
        setYearPicker() {
            this.posiTop = `${this.$refs.yearPickerRef.picker.$el.offsetTop}px`;
            console.log(this.$refs.yearPickerRef.picker, '...')
            this.posiLeft = `${this.$refs.yearPickerRef.picker.$el.offsetLeft - 150}px`
            this.visiable = true;
        },
        setMonthPicker() {
            this.posiTop = `${this.$refs.monthPickerRef.picker.$el.offsetTop}px`;
            this.posiLeft = `${this.$refs.monthPickerRef.picker.$el.offsetLeft - 150}px`
            this.visiable = true;
        },
        changeDateRange () {
            this.visiable = false;
            this.$emit();
        },
        changeYear() {
            this.visiable = false;
            this.$emit();
        },
        changeMonth() {
            this.visiable = false;
            this.$emit();
        },
        // 自定义阻止冒泡
        stopBubble() {
            if (this.showDateRangePicker) {
                this.$refs.dateRangePickerRef.showPicker();
            }
            if (this.showYearPicker) {
                this.$refs.yearPickerRef.showPicker();
            }
            if (this.showMonthPicker) {
                this.$refs.monthPickerRef.showPicker();
            }
            this.visiable = true;
        },
        mouseenterSidebar() {
            this.inSidebar = true;
        },
        mouseleaveSidebar() {
            this.inSidebar = false;
        },
        blurDateRangePicker() {
            if (!this.inSidebar) {
                this.visiable = false;
            }
        },
        blurYearPicker() {
            if (!this.inSidebar) {
                this.visiable = false;
            }
        },
        blurMonthPicker() {
            if (!this.inSidebar) {
                this.visiable = false;
            }
        }
    }
}
</script>

<style scoped lang="less">
.el-date-editor {
    width: 240px !important;
}
.side-bar {
    width: 150px !important;
    height: 330px !important;
    position: absolute;
    border: 1px solid #E4E7ED;
    background: #fff;
    border-radius: 4px 0 0 4px;
    &-item {
        display: flex;
        width: 100%;
        line-height: 28px;
        color: black;
        padding: 5px 0 0 10px;
        cursor: pointer;
    }
    .side-bar-item-active {
        display: flex;
        width: 100%;
        line-height: 28px;
        padding: 5px 0 0 10px;
        cursor: pointer;
        color: #409EFF;
    }
}
</style>
<style lang="less">
.date-range-picker-popover {
    height: 330px !important;
}
.year-picker-popover {
    width: 650px !important;
    height: 330px !important;
    .el-year-table {
        width: 650px !important;
        height: 245px !important;
    }
}
.month-picker-popover {
    width: 650px !important;
    height: 330px !important;
    .el-month-table {
        width: 650px !important;
        height: 245px !important;
    }
}
</style>